<template>
  <div class="banner">
    <div class="category">
      <ul>
        <li v-for="item in categoryStore.categoryList" :key="item.id">
          <RouterLink to="/">{{ item.name }}</RouterLink>
          <RouterLink v-for="i in item.children.slice(0,2)" :key="i" to="/">{{ i.name }}</RouterLink>
          <!-- 弹层 -->
          <div class="detail">
            <div class="title">
              <h1>分类推荐</h1>
              <p>根据您的购买记录推荐</p>
            </div>
            <div class="list">
              <ul>
                <li v-for="data in item.goods" :key="data" style="color: red;">
                  <RouterLink to="/">
                    <img :src="data.picture" alt="">
                    <div class="info">
                      <p class="name ellipsis-2">{{ data.name }}</p>
                      <p class="desc ellipsis">{{ data.desc }}</p>
                      <p class="price"><i>¥</i>{{ data.price }}</p>
                    </div>
                  </RouterLink>
                  
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li>
          <RouterLink to="/">品牌</RouterLink>
          <RouterLink to="/">品牌推荐</RouterLink>
        </li>
      </ul>
    </div>
    
  </div>
</template>

<script setup>
import { useCategoryStore } from '@/store/category';
const categoryStore = useCategoryStore()
</script>

<style lang="scss" scoped>
.banner{
  width: 1240px;
  height: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  z-index: 99;
  position: relative;
}
.category{
  width: 250px;
  height: 500px;
  ul{
    display: flex;
    flex-direction: column;
    li{
      width: 250px;
      height: 50px;
      background: rgba( 0,0,0,0.8) ;
      padding: 0 0 0 40px;
      line-height: 50px;
      a{
        margin: 0px 4px 0px 0px ;
        color: #FFFFFF;
        font-size: 14px;
        &:first-child{
          font-size: 16px;
        }
      }
      &:hover{
        .detail{
          display: block;
        }
      }
    }
  }
}
.detail{
  padding: 0 15px;
  position: absolute;
  top: 0;
  left: 250px;
  display: none;
  width: 990px;
  height: 500px;
  background: rgba($color: #e4dede, $alpha: 0.8);
  ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    li{
      width: 310px;
      height: 120px;
      margin-right: 15px;
      margin-bottom: 15px;
      border-radius: 4px;
      border: 1px solid #efe8e8;
      background: #fff;
      &:nth-child(3n){
        margin-right: 0;
      }
      a{
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        align-items: center;
        padding: 10px;
        &:hover{
          background: #e3f9f4;
        }
        img{
          width: 95px;
          height: 95px;
        }
        .info{
          height: 95px;
          line-height: 24px;
          padding-left: 10px;
          overflow: hidden;
          .name {
            font-size: 16px;
            color: #666;
          }
          .desc {
            font-size: 14px;
            color: #999;
          }
          .price {
            font-size: 22px;
            color: $priceColor;
            i {
              font-size: 16px;
            }
          }
        }
      }
      
    }
  }
}
</style>